<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>原材料信息中心</title>
      <link rel="stylesheet"  type="text/css" href="../static/css/layui.css">
    <script src="../static/js/layui.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>
    <base href="/">
</head>
<body >
<div class="layui-fluid" style="padding: 0px">
  <div class="layui-row" >
    <div class="layui-panel " >
      <div style="padding: 25px;">原材料查询</div>
    </div>
  </div>
  <div class="layui-row">
    <div class="demoTable">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;搜索原材料ID：
      <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
      </div>
      <button class="layui-btn" data-type="reload">搜索</button>
    </div>

    <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>


    <script>
      layui.use('table', function(){
        var table = layui.table;
        //方法级渲染
        table.render({
          elem: '#LAY_table_user'
          ,url: 'wraw/get_table/'
          ,escape:true
          ,cols: [[
            {checkbox: true, fixed: true}
            ,{field:'rid', title: '原材料ID', width:400, sort: true,  }
            ,{field:'rname', title: '原材料名称', width:250}
            ,{field:'rintroduction', title: '原材料规格介绍', width:630}
          ]]
          ,id: 'testReload'
          ,page: true
          ,height: 520
        });

        var $ = layui.$, active = {
          reload: function(){
            var demoReload = $('#demoReload');

            //执行重载
            table.reload('testReload', {
              page: {
                curr: 1 //重新从第 1 页开始
              }
              ,where: {
                key: {
                  rid: demoReload.val()
                }
              }
            });
          }
        };

        $('.demoTable .layui-btn').on('click', function(){
          var type = $(this).data('type');
          active[type] ? active[type].call(this) : '';
        });
      });


    </script>




  </div>

</div>
<script>
  layui.use(['element', 'layer', 'util'], function(){
    var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

    //头部事件
    util.event('lay-header-event', {
      //左侧菜单事件
      menuLeft: function(othis){
        layer.msg('展开左侧菜单的操作', {icon: 0});
      }
      ,menuRight: function(){
        layer.open({
          type: 1
          ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
          ,area: ['260px', '100%']
          ,offset: 'rt' //右上角
          ,anim: 5
          ,shadeClose: true
        });
      }
    });
  });
</script>

</body>
</html>